﻿<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title>Knockout Lists Tutorial. Step 1.</title>
	<script type="text/javascript" src="../lib/html.js"></script>
	<script type="text/javascript" src="../lib/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="../lib/knockout-3.1.0.js"></script>
	<link rel="stylesheet" type="text/css" href="../lib/styles.css"/>
	
	<script type="text/javascript">
		// Class to represent a row in the seat reservations grid
		function SeatReservation(name, initialMeal) {
			var self = this;
			self.name = name;
			self.meal = ko.observable(initialMeal);
		}

		// Overall viewmodel for this screen, along with initial state
		function ReservationsViewModel() {
			var self = this;

			// Non-editable catalog data - would come from the server
			self.availableMeals = [
				{ mealName: "Standard (sandwich)", price: 0 },
				{ mealName: "Premium (lobster)", price: 34.95 },
				{ mealName: "Ultimate (whole zebra)", price: 290 }
			];    

			// Editable data
			self.seats = ko.observableArray([
				new SeatReservation("Steve", self.availableMeals[0]),
				new SeatReservation("Bert", self.availableMeals[0])
			]);
		}

		$(function(){
			// Activates knockout.js
			ko.applyBindings(new ReservationsViewModel());
		});
	</script>
	
</head>
<body>
	<h1>Knockout Lists Tutorial. Step 1.</h1>
	<p>Для отображения списка элементов используется оператор связывания <span class="code">foreach</span>.</p>
	
	<div class="samplePanel">
		<h2>Your seat reservations</h2>

		<table>
			<thead><tr>
				<th>Passenger name</th><th>Meal</th><th>Surcharge</th><th></th>
			</tr></thead>
			<!-- Todo: Generate table body -->
			<tbody data-bind="foreach: seats">
				<tr>
					<td data-bind="text: name"></td>
					<td data-bind="text: meal().mealName"></td>
					<td data-bind="text: meal().price"></td>
				</tr>
			</tbody>
		</table>
	</div>
	<p class="mainLink"><a href="../index.html">На главную</a></p>
</body>
</html>